<script>
  let { char, selected, hover, click, zoomlevel, size } = $props();
  let tileVisibility = $derived(char.visible ? 'tile-visible' : 'tile-invisible');
  let tileSelected = $derived(selected && selected.x === char.x && selected.y === char.y ? 'tile-selected' : '');
  let color = $derived(char.color ?? '#fff');
  let background = $derived(char.background ?? '#fff0');
</script>

<span
  class="tile {tileVisibility} {tileSelected}"
  style="color: {color}; background-color: {background}; font-size: {size}px; width: {zoomlevel}px; height: {zoomlevel}px; line-height: {zoomlevel}px" onmouseenter={hover} onclick={click}>
  {char.glyph}
</span>

<style>
  .tile {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    text-align: center;
    cursor: default;
  }

  .tile-visible {
  }

  .tile-selected {
    box-sizing: border-box;
    border: solid #8bd 1px;
    margin-top: -1px;
    margin-left: -1px;
    margin-right: 1px;
  }

  .tile-invisible {
    opacity: 50%;
  }

</style>
